import {messages} from 'share/common';
import React, { Component } from 'react';
import { connect } from 'react-redux';
import {
  Modal, message,
  Tabs, Radio, Icon, Button
} from 'antd';
import errorMessage from 'share/errorMessage';
import CtripSetting from './settings/ctrip-setting';
import CMBCSetting from './settings/cmbc-setting';
import CMBCOpenDetail from './detail/cmbc-open-detail';
import ConsumerDescription from './consumer-description';
import ConsumerOpenDetail from './consumer-open-detail';
import ConsumerOtherSetting from './consumer-other-setting';
import SupplierUtil from '../overview/supplierUtil';
import consumerService from './consumer.service';
import { MeiyaEditFrame, CtripEditFrame, DidiEditFrame } from './edit-frames';

const {TabPane} = Tabs;

class ConsumerOpenPage extends Component {

  constructor(props) {
    super(props);
    this.state = {
      currentTabKey: '1',
      cmbcOpenStatus: false,
      openBtnLoading: false,
    };
  }

  consumerConfig = {
    meiya: {
      openDetail: {
        searchForm: SupplierUtil.newOpenConsumerSearchForm(),
        columns: SupplierUtil.getNewOpenConsumerColumns('meiya'),
        service: 'getMeiyaList',
        EditFrame: MeiyaEditFrame
      },
      otherSetting: {}
    },
    ctrip: {
      openDetail: {
        searchForm: SupplierUtil.newOpenConsumerSearchForm(),
        columns: SupplierUtil.getNewOpenConsumerColumns('ctrip'),
        service: 'getCtripList',
        EditFrame: CtripEditFrame
      },
      otherSetting: {
        employeeSynContent: (context) => SupplierUtil.getOtherEmployeeSetting(context, 'ctrip'),
        ctripSetting: (<CtripSetting />),
      }
    },
    didi: {
      openDetail: {
        searchForm: SupplierUtil.newOpenConsumerSearchForm(),
        columns: SupplierUtil.getNewOpenConsumerColumns('didi'),
        service: 'getDidiList',
        EditFrame: DidiEditFrame
      },
      otherSetting: {
        depSynContent: (context) => SupplierUtil.getOtherDepSetting(context, 'didi'),
        didiSettingContent: (context) => SupplierUtil.getDidiSetting(context, 'didi')
      }
    },
    CMBC: {
      otherSetting: {
        cmbcSetting: (<CMBCSetting />),
      }
    },
  };

  componentDidMount() {
    const { type, tab } = this.props.params;
    if (type === 'CMBC') {
      this.getCMBCStatus();
    }
    if (tab !== ':tab' && tab) {
      this.setState({ currentTabKey: tab });
    }
  }

  // 跳转到开通tab页
  toOpenConsumer = (type, openStatus) => {
    if (type === 'CMBC' && openStatus) {
      Modal.confirm({
        title: messages('supplier.key132'/* 关闭招行商务卡服务 */),
        content: (
          <div style={{color: 'red', fontSize: 12}}>
            <div>
              1.
              {messages('supplier.key133'/* 关闭后不能在汇联易中使用招行商务卡服务 */)}
            </div>
            <div>
              2.
              {messages('supplier.key134'/* 重新启用后，原配置信息仍有效 */)}
            </div>
          </div>
        ),
        okText: messages('supplier.key100'/* 继续关闭 */),
        onOk: () => {
          this.setState({ openBtnLoading: true });
          consumerService.updateBankcardStatus('CMBC', 0).then(() => {
            message.success(messages('common.operate.success')/* 操作成功 */);
            this.getCMBCStatus();
          }).catch((e) => {
            this.setState({ openBtnLoading: false });
            errorMessage(e.response);
          });
        }
      });
    } else {

      this.setState({ currentTabKey: '2' });
    }
  };

  onSwitchTab = (activeKey) => {
    this.setState({ currentTabKey: activeKey });
  };

  getOpenDetailParams = (type, attr) => {
    if (this.consumerConfig[type]) {
      return {
        type,
        ...this.consumerConfig[type][attr]
      };
    }
    return {};

  };

  // 获取商务卡开通状态
  getCMBCStatus = () => {
    this.setState({ openBtnLoading: true });
    consumerService.getBankcardStatus('CMBC').then((res) => {
      this.setState({
        openBtnLoading: false,
        cmbcOpenStatus: res.data.rows
      });
    });
  };

  render() {
    const { currentTabKey, openBtnLoading, cmbcOpenStatus } = this.state;
    const { type } = this.props.params;
    const isOpen = !!this.consumerConfig[type];

    return (
      <div>
        <Tabs activeKey={currentTabKey} onChange={this.onSwitchTab}>
          <TabPane key="1" tab={messages('supplier.key293')/* 消费商介绍 */}>
            <ConsumerDescription
              type={type}
              isOpen={isOpen}
              toOpen={this.toOpenConsumer}
              openStatus={cmbcOpenStatus}
              btnLoading={openBtnLoading}
              />
          </TabPane>
          {
            isOpen && (
              <TabPane key="2" tab={messages('supplier.key55')/* 在线开通 */} disabled={type === 'CMBC' && !cmbcOpenStatus}>
                {type === 'CMBC' ? <CMBCOpenDetail openStatus={cmbcOpenStatus} onOpen={this.getCMBCStatus} />
                  : <ConsumerOpenDetail {...this.getOpenDetailParams(type, 'openDetail')} />}
              </TabPane>
            )
          }
          {
            isOpen && (
              <TabPane key="3" tab={messages('supplier.key294')/* 其他设置 */} disabled={type === 'CMBC' && !cmbcOpenStatus}>
                <ConsumerOtherSetting {...this.getOpenDetailParams(type, 'otherSetting')} />
              </TabPane>
            )
          }
        </Tabs>
      </div>
    );
  }
}

function mapStateToProps(state) {
  return {};
}

/**
 * type 当前消费商类型
 */

export default connect(mapStateToProps)(ConsumerOpenPage);
